<template>
  <div class="container">
      <top :address="address"></top>
      <div class="banner">
          <swiper :imgUrls="banner"></swiper>
      </div>
      <div class="teachClassify">
           <div class="specialNav">
              <van-row>
                <van-col span="6" v-for="(item,idx) in starlNav" :key="idx" @click="switchTab(idx,item.top,item.id)">
                  <div :class="currentStar==idx ? 'top-bar-active' : ''" >
                      <span>{{item.name}}</span>
                      <img src="/static/images/grey_triangle1_pre@2x.png" alt="" class="icon1" v-if="(idx>1)&&item.top!=0">
                      <img src="/static/images/grey_triangle1@2x.png" alt="" class="icon1" v-if="(idx>1)&&item.top==0">
                      <img src="/static/images/price.jpg" alt="" class="icon" v-if="idx==1&&item.top==0">
                      <img src="/static/images/jiang.jpg" alt="" class="icon" v-if="idx==1&&item.top==1">
                      <img src="/static/images/sheng.jpg" alt="" class="icon" v-if="idx==1&&item.top==2">
                  </div>
                </van-col>
              </van-row>
            </div>
            <div class="keClassify" v-if="show">
                <span :class="active==idx ? 'active' : ''" v-for="(item,idx) in keClassify" :key="idx" @click="selLei(index,item.id)">{{item.name}}</span>
            </div>
      </div>
      <div style="padding-top:10px;">
          <teacher :teacher="item"  v-for="(item,idx) in list" :key="idx"></teacher>
      </div>
      <img src="/static/images/que/no_conten@2x.png" class="queS" v-if="queS"/>
  </div>
</template>

<script>
import swiper from "@/components/swiper";
import top from "@/components/top"
import teacher from "@/components/teacher";

import {teacherList} from "@/api/teacher";
import {teacherCate} from "@/api/teacher";
import {indexads} from '@/api/index'
export default {
  components: {
      swiper,
      top,
      teacher
  },

  data () {
    return {
      num:4,
      sign_today:0,
      banner: ["/static/images/banner.jpeg"],
      starlNav:[
        {name:"推荐",id:"1",top:0,jiang:0,sheng:0},
        {name:"粉丝",id:"2",top:0,jiang:1,sheng:2},
        {name:"分类",id:"3",top:0,jiang:3,sheng:3},
        {name:"距离",id:"4",top:0,jiang:4,sheng:4},
      ],
       show:false,
       currentStar:"0",
       active:0,
       keClassify:[],
       list:[],
       user_id:0,
       coordinate:{
         longitude:0,
         latitude:0
       },
       page:1,
       cate_id:0,
       load:false,
       img: this.$URL.imgurl,
       queS:false,
       starstatus:0,
       address:"",
       zip:0
    }
  },
  methods:{
     switchTab(idx,top,id){
      this.list=[];
      this.show=false;
      var currentStar = this.currentStar;
      var idx = idx;
      var id = id;
      var Top=top;
      var starlNav = this.starlNav;
      if(Top==0){
        top=1
      }else if(Top==1){
        top = 2
      } else if (Top == 2) {
        top = 1;
      }
      // console.log(3)
      starlNav[idx].top=top
      if ((currentStar == idx) && (idx==0)){
        this.starstatus=0;
        
        this.list=[]  
        this.getList()
        return;
      }else if(idx==2){
        for (var i = 0; i < starlNav.length; i++) {
          starlNav[i].top = 0
        }
        this.show=true;
        this.starlNav=starlNav
        this.currentStar=idx
      }else{
        for (var i = 0; i < starlNav.length; i++) {
          starlNav[i].top = 0
        }
        if(top==1){
           this.starstatus=starlNav[idx].jiang 
           
           this.list=[]  
           this.getList()
        }else if(top==2){
          this.starstatus=starlNav[idx].sheng 
          
          this.list=[]  
          this.getList()
        }
        starlNav[idx].top = top

        this.starlNav=starlNav
        this.currentStar=idx
      }
    },
    selLei(idx,id){
        this.active=idx;
        this.cate_id=id;
        this.page=1;
        this.show=false;
        
        this.list=[]  
        this.getList()
    },
    getList(){
      this.load=false;
      this.queS=false;
      let data={};
      data.lng=this.coordinate.longitude;
      data.lat=this.coordinate.latitude;
      data.user_id=this.user_id;
      data.page=this.page;
      data.status=this.starstatus;
      data.cate_id=this.cate_id
      // data.tags_id=tags_id;
      teacherList(data).then(res=>{
          if(res.code==200){
              let last_page=res.data.last_page
              this.page==1?this.list=res.data.data:this.list=this.list.concat(res.data.data);
              last_page>this.page?this.load=true:this.load=false
          }else if(res.code==201){
             this.queS=true
          }
      })
    },
    getads(spaceid){
      indexads({spaceid:spaceid,zip:this.zip}).then(res=>{
        this.banner=res.data
      })
    },
    getCate(){
      teacherCate().then(res=>{
         if(res.code==200){
            this.keClassify=res.data
         }
      })
    }
  },
  created () {
       
  },
  onLoad(){
    
    Object.assign(this.$data, this.$options.data())
    wx.getStorageSync("user_info")?this.user_id=wx.getStorageSync("user_info").id:'';
    wx.getStorageSync("coordinate")?this.coordinate=wx.getStorageSync("coordinate"):'';
    this.address=wx.getStorageSync("address");
    this.zip=wx.getStorageSync("qcode");
    this.getList()
    this.getCate()
    this.getads(4)
  },
  onUnload(){
     
  },
}
</script>
<style>
.classify .nav .nav-item {
  width: 25%;
}
</style>
<style lang="scss">
    .banner swiper{
      height:135px;
      img{
        height:135px;
      }
    } 
    .queS{
      width:417rpx;
      height:324rpx;
      display:block;
      margin:50px auto;
    }
    .teachClassify{
        height:40px;
        width:100%;
        position:relative;
        .specialNav{
            font-size:14px;
            font-weight:500;
            color:rgba(51,51,51,1);
            text-align:center;
            height:40px;
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 4px 1px rgba(0, 0, 0, 0.07);
            line-height:40px;
            .icon{
              width:4px;
              height:9px;
              margin-left:1px;
              
            }
            .icon1{
              width:9rpx;
              height:7rpx;
              margin-left:1px;
              vertical-align:middle;
            }
            .top-bar-active{
                color:#1A84FB;
            }
        }
        .keClassify{
            padding:0 15px 10px 15px;
            position:absolute;
            left:0;
            top:44px;
            background:#fff;
            right:0;
            z-index:2;
            span{
                width:60px;
                line-height:25px;
                background:rgba(255,255,255,1);
                border:1px solid rgba(102,102,102,1);
                border-radius:13px;
                font-size:14px;
                font-weight:500;
                color:rgba(102,102,102,1);
                display:inline-block;
                text-align:center;
                margin-top:20px;
                margin-right:15px;
                margin-left:10px;
            }
            .active{
              border:1px solid rgba(26,132,251,1);
              color:rgba(26,132,251,1);
            }
          }
    }
    
</style>
